1. 顏色

• 例子 :
  $primary-color: #3498db; // 定義變數 $primary-color，表示主要顏色
  $light-primary: lighten($primary-color, 10%); // 使用 lighten 函數將主要顏色變亮 10%
  $dark-primary: darken($primary-color, 10%); // 使用 darken 函數將主要顏色變暗 10%

.button {
background-color: $primary-color; // 使用主要顏色作為背景色
border-color: $dark-primary; // 使用變暗後的顏色作為邊框顏色
&:hover {
background-color: $light-primary; // 當按鈕被 hover 時，背景色變亮
}
}

• 編譯後 :
  .button {
  background-color: #3498db; /* 主要顏色 /
  border-color: #297cbf; / 深色版本的顏色 */
  }

.button:hover {
background-color: #5dade2; /* 亮色版本的顏色 */
}
$primary-color 定義為 #3498db，其變亮和變暗後的結果被應用到 hover 和 border
lighten() 和 darken() 函數被編譯後產生了不同的色調

2. 陣列 List

• List 的初始值為1不為0
• set-nth($list, $n, $value)：修改 List 副本的指定項目並返回
• append($list, $value)：在 List 副本最後位置新增項目並返回
• join($list1, $list2)：將 List 副本進行合併並返回
• length($list)：計算 List 長度並返回
• 例子:
  $sizes: 10px, 20px, 30px; // 定義變數 $sizes，這是一個包含三個數值的陣列

@each $size in $sizes { // 使用 @each 循環遍歷陣列中的每個值
.margin-#{$size} { // 創建一個 class，名稱後跟陣列中的數值
margin: $size; // 將對應的數值應用為 margin
}
}

• 編譯後 :
  margin-10px {
  margin: 10px;
  }

.margin-20px {
margin: 20px;
}

.margin-30px {
margin: 30px;
}

• @each 迴圈根據 $sizes 中的每個數值生成對應的 class（.margin-10px、.margin-20px 等）
• 每個 class 中的 margin 根據相應的 $size 設置

3. 地圖 Maps

• map-merge($map1, $map2)：將 map 副本進行合併並返回 (如有重複項，後者將覆蓋前者)
• map-remove($map, $key1, $key2...)：刪除 map 副本中的指定項目並返回
• map-keys($map)：將 map 中的鍵以 List 型式返回
• map-values($map)：將 map 中的值以 List 型式返回
• 例子 :
  $theme-colors: (
  "primary": #3498db,
  "secondary": #2ecc71,
  "danger": #e74c3c
  ); // 定義顏色地圖

.button {
background-color: map-get($theme-colors, "primary"); // 從地圖中提取 primary 顏色
&:hover {
background-color: map-get($theme-colors, "secondary"); // hover 狀態下提取 secondary 顏色
}
}

• 編譯後 :
  .button {
  background-color: #3498db; /* 主要顏色 */
  }

.button:hover {
background-color: #2ecc71; /* secondary 顏色 */
}

• map-get() 函數從 $theme-colors 地圖中提取顏色
• background-color 變成了 #3498db 和 #2ecc71